<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="wrap">
    <button class="btn">新增</button>
    <div class="list">
      <li class="first">01</li>
      <li>02</li>
      <li class="mid">03</li>
      <li>04</li>
      <li>05</li>
      <li class="last">06</li>
    </div>
  </div>
</body>
<script>
  var list = document.querySelector(".list");
  var mid = document.querySelector(".mid");
  var btn = document.querySelector(".btn");

  // 层级关系
  // 父节点
  // 子节点
  // 同胞节点

  // 父元素/父节点  => 找的都是父元素  => 没问题
  // console.log(list.parentElement);
  // console.log(list.parentNode);

  // 子节点/子元素
  console.log(list.childNodes);
  console.log(list.children);

  // 常规浏览器 :  两个均正常
  // IE低版本(ie8以下):  IE低版本换行是不会产生文本节点的 list.childNodes  等价于 list.children

  // 第一个 子节点/子元素
  // console.log(list.firstChild);
  // console.log(list.firstElementChild);

  // 常规浏览器 :  两个均正常(节点 / 元素)
  // IE低版本(ie8以下): 不存在属性firstElementChild  =>undefined
  // 怎么解决?  IE低版本换行是不会产生文本节点的  => 此时firstChild就表示第一个元素节点


  // 问题?   常规浏览器和IE的写法不一致
  // 常规浏览器          list.firstElementChild
  // IE低版本(ie8以下):  list.firstChild
  // if(list.firstElementChild){
  //     console.log(list.firstElementChild);
  // }else{
  //     console.log(list.firstChild);
  // }

  function first(ele) {
    if (ele.firstElementChild) { //常规浏览器
      return ele.firstElementChild;
    } else {
      return ele.firstChild;
    }
  }

  function first(ele) {
    // return  ele.firstElementChild ?  ele.firstElementChild : ele.firstChild;
    return ele.firstElementChild || ele.firstChild;
  }



  // 最后一个 子节点/子元素
  // console.log(list.lastChild);
  // console.log(list.lastElementChild);

  // 常规浏览器 :  两个均正常(节点 / 元素)
  // IE低版本(ie8以下): 不存在属性lastElementChild  =>undefined
  // 怎么解决?  IE低版本换行是不会产生文本节点的  => 此时lastChild就表示最后一个元素节点

  // 兼容写法
  function last(ele) {
    // return  ele.lastElementChild ?  ele.lastElementChild : ele.lastChild;
    return ele.lastElementChild || ele.lastChild;
  }


  // 同级
  // 前一个 同胞节点/同级元素
  // console.log(mid.previousSibling);
  // console.log(mid.previousElementSibling);

  // 常规浏览器 :  两个均正常(节点 / 元素)
  // IE低版本(ie8以下): 不存在属性previousElementSibling =>undefined
  // 怎么解决?  IE低版本换行是不会产生文本节点的  => 此时previousSibling就表示前一个元素节点
  function prev(ele) {
    // return  ele.previousElementSibling ?  ele.previousElementSibling : ele.previousSibling;
    return ele.previousElementSibling || ele.previousSibling;
  }


  // 后一个 同胞节点/同级元素
  console.log(mid.nextSibling);
  console.log(mid.nextElementSibling);

  // 常规浏览器 :  两个均正常(节点 / 元素)
  // IE低版本(ie8以下): 不存在属性nextElementSibling =>undefined
  // 怎么解决?  IE低版本换行是不会产生文本节点的  => 此时nextSibling就表示后一个元素节点

  function next(ele) {
    // return  ele.nextElementSibling ?  ele.nextElementSibling : ele.nextSibling;
    return ele.nextElementSibling || ele.nextSibling;
  }

</script>

</html>